<template>
  <div id="index">
    <div class="app-container" id="container">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="right">
        <div class="div-moudle">
          <div class="moudle-header">
            <em style="font-size: 18px;font-style: normal;" class="big_title_style">模板基本信息</em>
          </div>
          <el-row :gutter="24" style=" margin-top: 17px; margin-bottom: 18px;">
            <el-col :span="8">
              <el-form-item label="模板名称" prop="moudleName">
                <el-input v-model="form.moudleName" placeholder="请输入模板名称" clearable class="input-rule" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="起始金额" prop="moudleAmount" width="400">
                <el-input v-model="form.moudleAmount" placeholder="包邮条件金额" clearable class="input-rule"
                  @input="form.moudleAmount=oninput(form.moudleAmount,2)" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="未满足邮费" prop="freightInitFate" width="400">
                <el-input v-model="form.freightInitFate" placeholder="未满足邮费" clearable class="input-rule"
                  @input="form.freightInitFate=oninput(form.freightInitFate,2)" />
              </el-form-item>
            </el-col>
          </el-row>
          <div class="moudle-header1">
            <em style="font-size: 18px;font-style: normal;" class="big_title_style">包邮配送区域</em>
          </div>
          <div style=" margin-top: 17px;margin-left: 20px; margin-bottom: 40px;">
            <el-row style=" margin: 10px 10px 10px 50px;">
              <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选
              </el-checkbox>
              <span style="margin-left:52px;font-size: 14px;color: #666;">已选:{{checkedCities.length}}个区域</span>
            </el-row>
            <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
              <el-checkbox style="padding: 5px 5px 5px 52px;width: 72px;" :key="dict.label"
                v-for="(dict,index) in options" :label="dict.label">{{dict.label}}
              </el-checkbox>
            </el-checkbox-group>
          </div>
          <div class="moudle-header1">
            <em style="font-size: 18px;font-style: normal;" class="big_title_style">买家付费区域</em>
          </div>
          <div style=" margin-top: 17px;margin-bottom: 40px;">
            <el-form-item label="省份">
              <span style="color: #606266;font-size: 14px;" v-for="(item,index) in moudleRegionArr" :key="index">
                {{item}}&nbsp;&nbsp;&nbsp;
              </span>
              <span style="color: #606266;font-size: 14px;" v-if="moudleRegionArr.length == 0">暂无</span>
            </el-form-item>
            <el-form-item label="请输入运费" prop="platfreightInitFate" style="width: 378px;">
              <el-input v-model="form.platfreightInitFate" placeholder="请输入运费" clearable class="input-rule"
                @input="form.platfreightInitFate=oninput(form.platfreightInitFate,2)" />
            </el-form-item>
          </div>
          <div class="moudle-header1">
            <em style="font-size: 18px;font-style: normal;" class="big_title_style">不配送区域</em>
          </div>
          <div style=" margin-top: 17px;">
            <el-form-item label="地区" prop="area">
              <el-select v-model="form.area" filterable placeholder="请选择地区" clearable size="small" style="width: 258px;"
                @change="addProvince">
                <el-option v-for="dict in options" :key="dict.label" :label="dict.label" :value="dict.label" />
              </el-select>
            </el-form-item>
            <el-form-item label="" v-if="dynamicTags != null && dynamicTags.length>0">
              <el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false"
                @close="handleClose(tag)">
                {{tag}}
              </el-tag>
            </el-form-item>
            <el-form-item label="不配送原因" v-if="dynamicTags != null && dynamicTags.length>0">
              <el-input type="textarea" :rows="2" placeholder="请输入不配送原因" v-model="form.reason">
              </el-input>
            </el-form-item>
          </div>
          <el-form-item label-width="0">
            <div class="dws">
              <el-button type="primary" @click="submitForm">保存</el-button>
              <el-button @click="colsePro">返回</el-button>
            </div>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
  import {
    getRegion
  } from '@/api/common/regin'
  import {
    listMoudle,
    getMoudle,
    delMoudle,
    addMoudle,
    updateMoudle,
    updateMoudleStatus
  } from "@/api/platform/moudle";
  export default {
    name: "postage",
    components: {

    },
    data() {
      return {
        // moudleRegionNumber: 0,
        moudleRegionArr: [], //付款的区域
        checkedCities: [], // 包邮的区域
        dynamicTags: [], // 不配送区域标签集
        checkAll: false,
        isIndeterminate: false,
        form: {},
        options: [], //全部的数据
        oneRegin: [], //全部的省市区
        rules: {
          moudleName: [{
            required: true,
            message: "模板名称不能为空",
            trigger: "blur"
          }],
          moudleAmount: [{
            required: true,
            message: "起始金额不能为空",
            trigger: "blur"
          }],
          freightInitFate: [{
            required: true,
            message: "未满足金额不能为空",
            trigger: "blur"
          }],
        },
        moudleUid: null,
      };
    },
    created() {

      this.moudleUid = this.$route.params && this.$route.params.moudleUid;
      getRegion().then((response) => {
        let name = "";
        this.options = response.data;
        this.options.forEach(vo => {
          if (this.moudleUid == null || this.moudleUid == "") {
            this.moudleRegionArr.push(vo.label);
          }
          this.oneRegin.push(vo.label);
        })
      });
      if (this.moudleUid) {
        getMoudle(this.moudleUid).then(response => {
          this.form = response.data;
          this.checkedCities = this.form.freeShippingList;
          this.moudleRegionArr = [];
          if(this.form.aloeGelList){
            this.moudleRegionArr = this.form.aloeGelList;

          }
          this.dynamicTags = this.form.noDeliveryList;
        })
      }

    },
    methods: {
      oninput(num, limit) {
        var str = num
        var len1 = str.substr(0, 1)
        var len2 = str.substr(1, 1)
        if (str.length > 1 && len1 == 0 && len2 != ".") {
          str = str.substr(1, 1)
        }
        if (len1 == ".") {
          str = ""
        }
        if (str.indexOf(".") != -1) {
          var str_ = str.substr(str.indexOf(".") + 1)
          if (str_.indexOf(".") != -1) {
            str = str.substr(0, str.indexOf(".") + str_.indexOf(".") + 1)
          }
        }
        //正则替换
        str = str.replace(/[^\d^\.]+/g, '') // 保留数字和小数点
        if (limit / 1 === 1) {
          str = str.replace(/^\D*([0-9]\d*\.?\d{0,1})?.*$/, '$1') // 小数点后只能输 1 位
        } else {
          str = str.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/, '$1') // 小数点后只能输 2 位

        }
        return str
      },
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            //console.log(this.moudleRegionArr)
            if (this.checkedCities.length == 0) {
              if (!this.form.platfreightInitFate) {
                this.$message.error("请输入运费！");
                return;
              }
            }
            this.form.freeShippingList = this.checkedCities;
            this.form.aloeGelList = this.moudleRegionArr
            this.form.noDeliveryList = this.dynamicTags;
            if (this.moudleUid == null || this.moudleUid == "") {
              addMoudle(this.form).then(respone => {
                this.msgSuccess("添加成功");
                this.colsePro();
              });
            } else {
              this.form.moudleUid = this.moudleUid;
              addMoudle(this.form).then(respone => {
                this.msgSuccess("修改成功");
                this.colsePro();
              });
            }
          }
        });
      },
      colsePro() {
        this.$store.dispatch("tagsView/delView", this.$route);
        this.$router.push({
          path: "/system/platform_set/moudle"
        });
      },
      // 添加不配送区域的事件
      addProvince(name) {
        if (name) {
          let index = 0;
          this.dynamicTags.forEach(tag => {
            if (tag == name) {
              this.$message.error('请勿重复添加！');
              index++;
            }
          })
          if (index == 0) {
            this.dynamicTags.push(name);
            // 与包邮和付款的联动
            this.checkedCities.splice(this.checkedCities.indexOf(name), 1);
            let inx = this.moudleRegionArr.indexOf(name);
            this.moudleRegionArr[inx] = "";
            /*if (this.checkedCities.length == 0) {
              //this.isIndeterminate = false;
            }*/
            this.checkAll = false;

          }
          this.form.area = "";
        }
      },
      // 关闭标签事件
      handleClose(tag) {
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
        let inx = -1;
        this.oneRegin.forEach((vo, index) => {
          if (tag == vo) {
            inx = index;
            return;
          }
        })
        // 与包邮和付款的联动
        this.moudleRegionArr[inx] = tag;
        if (this.checkedCities.length == 0) {
          // this.isIndeterminate = false;
          //this.checkAll = false;
        }
      },
      // 全选触发事件
      handleCheckAllChange(val) {
        this.checkedCities = val ? JSON.parse(JSON.stringify(this.oneRegin)) : [];
        // this.isIndeterminate = false;
        if (val) {
          this.moudleRegionArr = [];
        } else {
          this.oneRegin.forEach(vo => {
            this.moudleRegionArr.push(vo);
          })
        }
        // 不配送的区域
        this.dynamicTags = [];
      },
      // 单个触发事件
      handleCheckedCitiesChange(value) {
        //debugger
        let $this = this;
        //console.log(value)
        let checkedCount = value.length;
        $this.checkAll = checkedCount === $this.oneRegin.length;
        //$this.isIndeterminate = checkedCount > 0 && checkedCount < $this.oneRegin.length;
        // 买家付费区域
        //console.log($this.oneRegin)
        //console.log($this.moudleRegionArr)
        $this.moudleRegionArr = [];
        $this.oneRegin.forEach((vo, index) => {

          let bool = value.indexOf(vo);
          if (bool > -1) {
            $this.moudleRegionArr.push("");
            let ind = $this.dynamicTags.indexOf(vo);
            if (ind > -1) {
              this.dynamicTags.splice(ind, 1)
            }
          } else {
            let ind = $this.dynamicTags.indexOf(vo);
            if (ind <= -1) {
             // 买家付费
             $this.moudleRegionArr.push(vo);
            }else{
              $this.moudleRegionArr.push("");

            }

          }
        });
      }
    }
  };
</script>
<style scoped="scoped">
  .app-container {
    background-color: #F7F8FA;
    padding: 20px;
  }

  .el-tag+.el-tag {
    margin-left: 10px;
  }

  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }

  #container {
    width: 100%;
    height: 50%;
  }

  #photo {
    float: left;
    width: 70%;
  }

  #content {
    float: right;
    width: 30%;
  }

  .div-moudle {
    background-color: #fff;
    position: relative;
    padding: 50px 30px 30px;
    border: 1px solid #ebebeb;
    -moz-border-radius: 4px;
    border-radius: 10px;
    width: 1200px;
    margin: 0 auto;
  }


  .dws {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
  }
</style>
